iT邦幫忙

2022 iThome 鐵人賽

0
Modern Web

30天淺嘗主流前端設計系列 第 23

DAY23 Jquery特效使用2~~

  • 分享至 

  • xImage
  •  

DAY23 Jquery特效使用2~~

今天我們要來介紹剩下的特效,上次我們講了如何透過jquery的特效函式來顯示或隱藏元素,
我們今天要來學一些更花俏一點的~~~
-.fadeIn():用來為元素設定逐漸淡入的方式顯示的特效。
-.fadeOut():用來為元素設定逐漸淡出的方式隱藏的特效。
-.slideDown():用來為元素設定由上至下滑動的方式顯示的特效。
-slideUp():用來為元素設定由下至上滑動的方式隱藏的特效。
以上四種函式與上一篇的.hide及.show的用法是一模一樣的,就是更為酷炫的隱藏與顯示。
舉例如下:
(fadeOut隱藏):
https://ithelp.ithome.com.tw/upload/images/20221015/20151970bWiNAE05X3.png
(slideDown顯示):
https://ithelp.ithome.com.tw/upload/images/20221015/20151970dJwgUnylRI.png
-.fadeTo():用來調整元素的透明度,作用與css的opacity參數是一樣的,差別在能夠設定作用時間。
舉例如下:在600毫秒中,將img元素的透明度調整為30%

今天的課程就到這邊~~


上一篇
DAY22 Jquery特效使用1~~
下一篇
DAY24 認識Jquery UI1 ~~
系列文
30天淺嘗主流前端設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言